<template>
  <div class="service">
    <h3>便民服务</h3>
    <ul>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/话费1.png" alt="" />
            <img src="../../assets/service_imgs/话费2.png" alt="" />
          </i>
          <span class="service_txt">话费</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/机票1.png" alt="" />
            <img src="../../assets/service_imgs/机票2.png" alt="" />
          </i>
          <span class="service_txt">机票</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/酒店1.png" alt="" />
            <img src="../../assets/service_imgs/酒店2.png" alt="" />
          </i>
          <span class="service_txt">酒店</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/游戏1.png" alt="" />
            <img src="../../assets/service_imgs/游戏2.png" alt="" />
          </i>
          <span class="service_txt">游戏</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/加油卡1.png" alt="" />
            <img src="../../assets/service_imgs/加油卡2.png" alt="" />
          </i>
          <span class="service_txt">加油卡</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/火车票1.png" alt="" />
            <img src="../../assets/service_imgs/火车票2.png" alt="" />
          </i>
          <span class="service_txt">火车票</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/众筹1.png" alt="" />
            <img src="../../assets/service_imgs/众筹2.png" alt="" />
          </i>
          <span class="service_txt">众筹</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/理财1.png" alt="" />
            <img src="../../assets/service_imgs/理财2.png" alt="" />
          </i>
          <span class="service_txt">理财</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/白条1.png" alt="" />
            <img src="../../assets/service_imgs/白条2.png" alt="" />
          </i>
          <span class="service_txt">白条</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/电影票1.png" alt="" />
            <img src="../../assets/service_imgs/电影票2.png" alt="" />
          </i>
          <span class="service_txt">电影票</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/企业购1.png" alt="" />
            <img src="../../assets/service_imgs/企业购2.png" alt="" />
          </i>
          <span class="service_txt">企业购</span>
        </a>
      </li>
      <li class="service_item">
        <a class="service_lk">
          <i class="service_ico">
            <img src="../../assets/service_imgs/礼品卡1.png" alt="" />
            <img src="../../assets/service_imgs/礼品卡2.png" alt="" />
          </i>
          <span class="service_txt">礼品卡</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  mounted () {
    $('.service_lk').bind('click', function () {
      alert('敬请期待！')
    })
  }
}
</script>

<style scoped>
h3 {
  text-align: center;
  margin-top: 15px;
}
.service_item {
  position: relative;
  float: left;
  width: 63px;
  height: 55px;
  background: #fff;
  text-align: center;
  overflow: hidden;
  margin: 0 18px 5px;
}

.service_lk {
  display: block;
  position: relative;
}

.service_lk img:last-child {
  display: none;
}
.service_lk:hover img:last-child {
  display: block;
}

.service_lk:hover span {
  color: #ff5000;
}

.service_ico {
  display: block;
  position: relative;
  left: 18px;
  height: 28px;
  margin: 0 auto;
}

.service_ico img {
  display: block;
  width: 28px;
  height: 28px;
  position: absolute;
}

.service_txt {
  display: block;
  height: 25px;
  line-height: 25px;
  border-bottom: 2px solid #fff;
  color: #333;
  font-size: 12px;
}
</style>
